---
abbrlink: '61056'
author: 青云工作室
bottom_meta: true
categories:
- - web
- - hexo
comments: true
cover: false
date: '2022-07-14 14:40:10'
description: ''
headimg: https://cdn.chuqis.com/img/1658139167.6203759.jpg
indent: true
keywords: ''
mathjax: false
pin: false
tags:
- hexo
- action
- 建站
- 博客
title: 为hexo加一个自动部署
toc: true
top_meta: true
updated: '2022-12-30 16:34:07'
---
![https://cdn.chuqis.com/img/1658139167.6203759.jpg](https://cdn.chuqis.com/img/1658139167.6203759.jpg)

## Hexo 博客的Github Action自动化部署是什么？

简单说，就是把hexo博客的源代码上传到github代码仓库，github在代码发生变动的时候，自动通过安装一系列nodejs环境和相关依赖，生成html页面到github pages仓库。

再简单点说，就是把本地生成博客的工作，全部交给github执行。

## 为什么要action

hexo 是一款快速、简洁且高效的静态博客框架，因为它的高可定制性，所以深受各个程序员的喜爱，我也曾一头扎进去研究过，魔改了vlts主题，在使用过程中，也渐渐的发现了一些问题

情景一，当浏览自己某篇博客时发现了一些错误之后想要马上修改时，将要经历经历一下步骤
在本地的hexo博客文件夹中找到source/_post文件夹
找到那个md文件，打开修改
然后还要经历`hexo clean`,`hexo g`，`hexo d`

情景二，当想要马上写一篇博客时，需要经历以下步骤
在博客根目录中hexo n "博客名"
点击进入source/_post文件夹中找到这个md文件并打开写博客
然后还要经历`hexo clean`,`hexo g`，`hexo d`
且hexo是由nodejs编写的，性能不佳，生产需要较长时间
action的高性能可以解决这些问题

## 这样做的好处

随时随地都能修改或增加博文

使用`hpp`,`qexo`,`wexa`等编辑器

## 前言

网上这种教程一大堆，有的装了插件不一样（gulp等等），有的部署方法（ssh、令牌）不一样，以至于自动化部署的文件写法也不一样。

我这里尽量写一个适合小白和大多数hexo博客的一个自动化部署的教程。

**总体步骤** ：

* 使用Github令牌部署hexo博客
* Github新建一个私有仓库，并上传hexo博客源码
* 配置Github Action实现自动化部署

## How to do

### 获取github令牌

前往[github](https://github.com/settings/tokens)新建一个token

> 注意token只会显示一次注意保存，同时`注意``注意``注意`千万不要暴露token

注意先保存，等新建仓库后填入

在源码仓库的密钥处填入

![https://cdn.chuqis.com/img/1658138422.8459709.jpg](https://cdn.chuqis.com/img/1658138422.8459709.jpg)

`PERSONAL_TOKEN`里面写密钥即可

### 上传源码

首先初始化本地仓库

```bash
git init 
git add . 
git commit -m "first commit" 
git branch -M main git remote add origin https://github.com/username/xxx.git 
```

注意自己看着改

然后把在`.git/config`里面修改类似这样的远程路径https://github.com/username/xxx.git改成https://TOKEN@github.com/username/xxx.git

```bash
git push -u origin main
```

然后你就可以看到你的源码被推送到了远程仓库

### 配置自动流程

既然做的这一步了，就只差一步了配置自动化流程，帮助我们自动生成网页文件并推送到静态页面仓库

打开action new workflow 或者在本地新建`.github/workflows/main.yml`的文件

填入以下代码

> 已经很详细的看了上面的阐述，并且我不会直接照搬

```yml
name: Deploy
'on':
  - workflow_dispatch
  - push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          ref: main
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: 16.x
      - name: Install Hexo
        run: |
          npm install hexo-cli -g
          npm install -g gulp //如果没有gulp把这行去掉
      - name: Cache Modules
        uses: actions/cache@v2.1.1
        id: cache-modules
        with:
          path: node_modules
          key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}
      - name: Install Dependencies
        if: steps.cache-modules.outputs.cache-hit != 'true'
        run: |
          npm ci
      - name: Setting Token
        run: |
          sed -i "s/.Baidu_Token/${{ secrets.BAIDU_TOKEN }}/" _config.yml
      - name: Generate
        run: |
          hexo clean
          hexo recommend
          hexo generate
          gulp //如果没有gulp把这行去掉
          git clone https://github.com/username/username.github.io.git .public
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          publish_dir: ./public
          external_repository: username/username.github.io
          publish_branch: main
          exclude_assets: ''
          user_name: github-actions[bot]
          user_email: github-actions[bot]@users.noreply.github.com
```